<template>
	<view class="container">
		<view class="paymap_dl" @tap="map">
			<view class="paymap_dt">门店地址：{{shop.address}}</view>
			<view class="paymap_dd"><text class="iconfont icon-daohang"></text>导航</view>
		</view>
		<view class="myorder_list">
			<view class="myorder_ct">
				<view class="myorder_tfl">{{shop.name}}</view>
			</view>
			<view class="myorder_ct border0">
				<view class="pro_dl">
					<view class="pro_dt">
						<image :src="row.image" mode="aspectFill"></image>
					</view>
					<view class="pro_dd">
						<view class="pro_title">{{row.name}}</view>
						<view class="pro_lable">{{catename}}</view>
						<view class="pro_bottom">
							<view class="pro_price">￥{{hdid>0?row.hdprice:row.price}}</view>
							<view class="pro_num">x1</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="content pad30 fldl">
			<view class="fldt">商品总价：</view>
			<view class="fldd">￥{{hdid>0?row.hdprice:row.price}}</view>
		</view>
		<view class="content pad30 fldl">
			<view class="fldt">优惠券：</view>
			<view class="fldd" @click="yhqbtn">{{couponname}}<text></text></view>
		</view>
		<view class="fktxt">合计：<text>￥{{total}}</text></view>
		<view class="formbottom" @click="topay">
			<view class="formbtn">提交订单</view>
		</view>
		<!--优惠券弹窗-->
		<view class="commodity_screen" @click="hideModal" v-if="showModalStatus"></view>
		<view animation="{{animationData}}" class="commodity_attr_box" v-if="showModalStatus">
			<view class="yhq_pop">
				<view class="yhq_poptit">优惠详情</view>
				<view class="yhq_popct">

					<radio-group class="radio-group" @change="radioChange">
						<label class="radio-group_li" v-for="(item, index) in items" :key="item.value">
							<view class="fl">{{item.name}}</view>
							<view class="fr">
								<radio class="radio" :value="index" :checked="item.checked" />
							</view>
						</label>
					</radio-group>


				</view>
			</view>
			<view class="yhq_popbot">
				<view class="yhq_popbtn" @click="hideModal">关闭</view>
				<view class="yhq_popbtn on" @click="qued">确定</view>
			</view>
		</view>
		<!--优惠券弹窗end-->
	</view>
</template>

<script>
	import API from "@/common/api.js";
	//#ifdef WEB
	import jweixin from 'weixin-js-sdk'
	//#endif
	export default {
		data() {
			return {
				row: [],
				hdid: 0,
				id: 0,
				shop: [],
				showModalStatus: false,
				items: [],
				current: 0,
				total: "0.00",
				couponname: "不使用优惠",
				couponid: 0,
				catename: ""
			}
		},
		onLoad(options) {
			var $this = this
			this.hdid = options.hdid
			this.id = options.id
			var shopid = uni.getStorageSync("shopid");
			API.post("product/prodetail", {
				id: options.id,
				hdid: options.hdid,
				isshop: API.isshop,
				shopid: shopid
			}).then((res) => {
				if (res.code == 1) {
					$this.row = res.data
					$this.shop = res.data.shop
					$this.catename = res.data.cate.name
					if ($this.hdid > 0) {
						$this.total = res.data.hdprice
					} else {
						$this.total = res.data.price
					}

				}
			})
			API.post("user/myCoupons").then((res) => {
				if (res.code == 1) {
					$this.items = res.data
				}
			})
		},
		methods: {
			topay() {
				var $this = this
				var shopid = uni.getStorageSync("shopid");
				//#ifdef WEB
				var json = {
					id: this.id,
					hdid: this.hdid,
					couponid: this.couponid,
					paytype: "mp",
					isshop: API.isshop,
					shopid: shopid
				}
				uni.showModal({
					title: '提示',
					content: '确认要支付' + $this.total + "元？",
					success: function(res) {
						if (res.confirm) {
							API.post("order/topay", json).then((res) => {
								if (res.code == 1) {
									if (res.data.status == 0) {
										jweixin.config({
											debug: false,
											appId: res.data.appId, // 必填，公众号的唯一标识
											timestamp: res.data.timeStamp, // 必填，生成签名的时间戳
											nonceStr: res.data.nonceStr, // 必填，生成签名的随机串
											signature: res.data.paySign, // 必填，签名
											jsApiList: ['chooseWXPay'], // 必填，需要使用的JS接口列表	
										});
										jweixin.ready(() => {
											jweixin.chooseWXPay({
												appId: res.data.appId, // 必填，公众号的唯一标识
												timestamp: res.data.timeStamp,
												nonceStr: res.data
													.nonceStr, // 支付签名随机串，不长于 32 位
												package: res.data
													.package, // 统一支付接口返回的prepay_id参数值
												signType: res.data
													.signType, // 签名方式，默认为'SHA1'，使用新版支付需传入'MD5'
												paySign: res.data.paySign, // 支付签名
												success: function(res) { //支付成功回调
													API.showModal("支付成功",
														"/pages/index/index"
													)
												},
												cancel: function(res) {
													uni.showToast({
														title: '取消支付',
														icon: 'none',
														duration: 2000,
													})
												},
												fail: function(res) {
													console.log("fail", res);
													uni.showToast({
														title: '支付失败',
														icon: 'none',
														duration: 2000,
													})
												}
											});
										});
									} else {
										API.showModal(res.msg, "/pages/user/myorder/myorder")
									}

								} else {
									API.showModal(res.msg);
								}
							})
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});
				//#endif
				// #ifdef MP-WEIXIN
				var json = {
					id: this.id,
					hdid: this.hdid,
					couponid: this.couponid,
					paytype: "miniapp",
					isshop: API.isshop,
					shopid: shopid
				}
				uni.showModal({
					title: '提示',
					content: '确认要支付' + $this.total + "元？",
					success: function(res) {
						if (res.confirm) {
							API.post("order/topay", json).then((res) => {
								if (res.code == 1) {
									if (res.data.status == 0) {
										uni.requestPayment({
											'timeStamp': res.data.timeStamp,
											'nonceStr': res.data.nonceStr,
											'package': res.data.package,
											'signType': 'MD5',
											'paySign': res.data.paySign,
											'success': function(res) {
												API.showModal("支付成功",
													"/pages/user/myorder/myorder")
											},
											'fail': function(res) {}
										})
									} else {
										API.showModal(res.msg, "/pages/user/myorder/myorder")

									}


								} else {
									API.showModal(res.msg);
								}
							})
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});
				// #endif
			},
			map() {
				var $this = this
				if (this.shop.jing && this.shop.wei) {
					// #ifdef WEB
					var surl = encodeURIComponent(window.location.href.split('#')[0]);
					API.post("common/jweixin", {
						surl: surl
					}).then((res) => {
						if (res.code == 1) {
							jweixin.config({
								debug: res.data.debug,
								appId: res.data.appId,
								timestamp: res.data.timestamp,
								nonceStr: res.data.nonceStr,
								signature: res.data.signature,
								surl: res.data.url,
								jsApiList: res.data.jsApiList
							});

							jweixin.ready(function() {
								jweixin.openLocation({
									latitude: Number($this.shop.wei),
									longitude: Number($this.shop.jing),
									name: $this.shop.name || '',
									address: $this.shop.address
								});

							});

						}
					})
					// #endif
					// #ifndef WEB
					uni.openLocation({
						latitude: Number(this.shop.wei),
						longitude: Number(this.shop.jing),
						name: this.shop.name || '',
						address: this.shop.address
					});
					// #endif
				}
			},
			qued() {
				for (var i = 0; i < this.items.length; i++) {
					if (this.items[i].checked) {
						this.couponid = this.items[i].id
						this.couponname = this.items[i].name
						if (this.hdid > 0) {
							var t = Number(this.row.hdprice) - Number(this.items[i].value)
						} else {
							var t = Number(this.row.price) - Number(this.items[i].value)
						}

						if (t < 0) {
							t = 0
						}
						this.total = t.toFixed(2)
					}
				}
				this.showModalStatus = false
			},
			yhqbtn() {
				this.showModalStatus = true
			},
			hideModal() {
				this.showModalStatus = false
			},
			radioChange: function(evt) {
				for (var i = 0; i < this.items.length; i++) {
					if (i == evt.detail.value) {
						this.items[i].checked = true;
					} else {
						this.items[i].checked = false;
					}
				}
			}

		}
	}
</script>

<style lang="scss">
	page {
		background: #f7f7f7;
	}

	.myorder_list {
		overflow: hidden;
		background: #fff;
		margin: 20rpx 0 0;
		box-sizing: border-box;
	}

	.myorder_ct {
		padding: 30rpx;
		width: 100%;
		overflow: hidden;
		box-sizing: border-box;
	}

	.myorder_ct {
		border-bottom: 2rpx #eee solid;
	}

	.myorder_ct.border0 {
		border-bottom-width: 0;
	}

	.myorder_tfl {
		color: #666;
		float: left;
		font-size: 28rpx;
		font-weight: bold;
	}

	.pro_dl {
		width: 100%;
		overflow: hidden;
		margin-bottom: 30rpx;
	}

	.pro_dl:last-child {
		margin-bottom: 0;
	}

	.pro_dt {
		width: 180rpx;
		height: 180rpx;
		border-radius: 10rpx;
		overflow: hidden;
		display: flex;
		justify-content: center;
		align-items: Center;
		float: left;
	}

	.pro_dt image {
		width: 100%;
		height: 100%;
		border-radius: 10rpx;
	}

	.pro_dd {
		padding-left: 210rpx;
	}

	.pro_title {
		line-height: 44rpx;
		font-size: 28rpx;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	.pro_lable {
		color: #999;
		margin-top: 10rpx;
	}

	.pro_bottom {
		margin-top: 50rpx;
	}

	.pro_price {
		float: left;
		font-size: 28rpx;
	}

	.pro_num {
		float: right;
		color: #999;
	}

	.fldl {
		line-height: 80rpx;
		font-size: 26rpx;
		background-color: #fff;
		display: flex;
	}

	.fldd {
		flex: 1;
		text-align: right;
	}

	.fktxt {
		padding: 30rpx 30rpx 40rpx;
		overflow: hidden;
		box-sizing: border-box;
		text-align: right;
		font-size: 28rpx;
		background-color: #fff;
	}

	.fktxt text {
		color: $color;
	}

	.fldd text {
		float: right;
		margin: 28rpx 0 0 20rpx;
		position: relative;
		width: 0;
		height: 0;
		border: 12rpx solid;
		border-color: transparent transparent transparent #999;
	}

	.fldd text::after {
		content: '';
		position: absolute;
		top: -12rpx;
		left: -16rpx;
		border: 12rpx solid;
		border-color: transparent transparent transparent #fff;
	}

	.paymap_dl {
		padding: 30rpx;
		width: 100%;
		overflow: hidden;
		box-sizing: border-box;
		display: flex;
		line-height: 40rpx;
		background: #fff;
		font-size: 26rpx;
	}

	.paymap_dt {
		flex: 1;
	}

	.paymap_dd text {
		color: $color;
		float: left;
		margin-right: 10rpx;
	}


	.commodity_screen {
		width: 100%;
		height: 100%;
		position: fixed;
		top: 0;
		left: 0;
		background: #000;
		opacity: 0.5;
		overflow: hidden;
		z-index: 9;
		color: #fff;
	}

	.commodity_attr_box {
		width: 100%;
		border-radius: 40rpx 40rpx 0 0;
		position: fixed;
		bottom: 0;
		left: 0;
		z-index: 10;
		background: #fff;
		font-size: 24rpx;
		line-height: 40rpx;
		animation: contentShow 0.2s linear both;
	}

	.yhq_popbot {
		border-top: 2rpx #eee solid;
		width: 100%;
		overflow: hidden;
		text-align: center;
		height: 90rpx;
		line-height: 90rpx;
		color: #999;
		display: flex;
		font-size: 30rpx;
		font-weight: bold;
	}

	.yhq_popbtn {
		flex: 1;
	}

	.yhq_popbtn.on {
		color: #fff;
		background: $color;
	}

	.yhq_pop {
		padding: 30rpx;
	}

	.yhq_poptit {
		width: 100%;
		overflow: hidden;
		font-size: 36rpx;
		font-weight: bold;
		text-align: center;
		padding: 20rpx 0;
	}

	.yhq_popct {
		height: 500rpx;
		overflow-y: auto;
	}

	.radio-group_li {
		width: 100%;
		overflow: hidden;
		display: block;
		margin-top: 40rpx;
		padding: 4rpx 0;
	}

	.radio-group_li .fl {
		font-size: 30rpx;
		font-weight: bold;
	}

	.radio {
		transform: scale(.9);
	}

	@keyframes contentShow {
		from {
			transform: translateY(110%);
		}

		to {
			transform: translateY(0%);
		}
	}
</style>